<!--
 * @Description: 
 * @version: 
 * @Author: dh
 * @Date: 2022-02-23 10:26:57
 * @LastEditors: dh
 * @LastEditTime: 2022-02-23 17:48:20
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
	</head>

	<body>
		a和b是同域的 http://localhost:3000 c是独立的 http://localhost:4000 a获取c的数据 a先引用c c把值放到window.name,把a引用的地址改到b

		<!-- 
  window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

其中a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000
 -->
		<iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
		<script>
			let first = true;
			// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
			function load() {
				if (first) {
					// 第1次onload(跨域页)成功后，切换到同域代理页面
					let iframe = document.getElementById('iframe');
					// console.log(iframe.contentWindow.name);
					iframe.src = 'http://localhost:3000/b.html';
					first = false;
				} else {
					// 第2次onload(同域b.html页)成功后，读取同域window.name中数据
					console.log(iframe.contentWindow.name);
				}
			}
		</script>
	</body>
</html>
